iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Modern Web

Angular10 實作教學系列 第 19

NG10鐵人賽 - 19 - localStorage & sessionStorage 使用

  • 分享至 

  • xImage
  •  

說明

用於 使用 localStorage 和 sessionStorage 儲存資料,並且在重新整理網頁時,再次讀取資料,並載入到應用程式

localStorage 用於 長期資料保存
sessionStorage 用於 短期資料保存(僅一個分頁,但聽說利用連結也會得到資料)

結果

https://i.imgur.com/EaysEfv.gif

component.ts

key = 'userInfo';
localLetter: string;
sessionLetter: string;

// 清除兩個local,session storage
clearStorage(): void {
    localStorage.removeItem(this.key);
    sessionStorage.removeItem(this.key);
}

getLocalStorage(): void {
    this.localLetter = this.getLocal() ? decodeURI(this.getLocal()) : 'local 空白';
}

getSessionStorage(): void {
    this.sessionLetter = this.getSession() ? decodeURI(this.getSession()) : 'session 空白';
}

setLocalStorage(text): void {
    const str = JSON.stringify(text);
    const encodeStr = encodeURI(str);
    this.setLocal(encodeStr);
}

setSessionStorage(text): void {
    const str = JSON.stringify(text);
    const encodeStr = encodeURI(str);
    this.setSession(encodeStr);
}

private getLocal(): string {
    return localStorage[this.key];
}

private setLocal(data: string): void {
    localStorage[this.key] = data;
}

private getSession(): string {
    return sessionStorage[this.key];
}

private setSession(data: string): void {
    sessionStorage[this.key] = data;
}

component.html

<h1>本地端儲存</h1>
{{localLetter}}
{{sessionLetter}}
<button type="button" (click)="setSessionStorage('虛擬')">session 資料變成 虛擬</button>
<button type="button" (click)="setLocalStorage('現實')">local 資料變成 現實</button>
<button type="button" (click)="getSessionStorage()">session 資料取得</button>
<button type="button" (click)="getLocalStorage()">local 資料取得</button>
<button type="button" (click)="clearStorage()">local 資料清除</button>

上一篇
NG10鐵人賽 - 18 - 資料傳遞處理 - 處理完再給你
下一篇
NG10鐵人賽 - 20 - 重新整理頁面帶入值
系列文
Angular10 實作教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言